import { Tag, Descriptions, Input, Button, message, Spin } from "antd"
import { useState } from "react";
import { AddSupplier } from "../../api/supplier";
import { LoadingOutlined } from '@ant-design/icons';
import { AddMerchant } from "../../api/merchant";
/**
 * 
 * @returns 新增商户
 */
const MerchantAdd = () => {
    document.info = [
        {
            title: "商户新增",
            url: "/merchant/add",
        },
        {
            title: "商户管理",
            url: "/merchant",
        }
      ]
    const [users, setUser] = useState({
        name: "",
        phone: "",
        contacts: "",
    });
    const [loading, setLoading] = useState(false);
    //设置名称
    const getName = (e) => {
        setUser((users) => ({ ...users, name: e.target.value }));
    }
    //设置手机号
    const getPhone = (e) => {
        setUser((users) => ({ ...users, phone: e.target.value }));
    }
    //设置联系人
    const getContacts=(e)=>{
        setUser((users) => ({ ...users, contacts: e.target.value }));
    }


    const addSupplier = async () => {
        setLoading(true);
        const res = await AddMerchant({...users});
        if (res?.result === 0) {
            message.success("操作成功");
            setUser({
                name: "",
                phone: "",
                contacts: "",
            })
            setLoading(false);
        } else {
            message.error(res.message);
            setLoading(false);
        }
    }


    //描述列表
    const items = [
        {
            key: '1',
            label: '名称',
            children:
                <Input onChange={(e) => getName(e)} value={users.name}></Input>
        },
        {
            key: '2',
            label: '电话',
            span: 2,
            children: <Input onChange={(e) => getPhone(e)} value={users.phone} maxLength={11}></Input>
        },
        {
            key: '3',
            label: '联系人',
            span: 3,
            children: <Input onChange={(e) => getContacts(e)} value={users.contacts} maxLength={20}></Input>
        },
        {
            key: '5',
            label: '行为',
            span: 3,
            children: <Button type="primary" onClick={() => { addSupplier() }} disabled={users.phone.length != 11 || users.name == "" || users.contacts===""}>新增</Button>
        }
    ]

    return (
        <>
            <div className="Containers">
                <Spin
                    spinning={loading}
                    indicator={
                        <LoadingOutlined
                            style={{
                                fontSize: 24,
                            }}


                        />
                    }
                >
                    <div className='pds'>

                        <Descriptions title="新增商户" layout="vertical" bordered items={items} />
                    </div></Spin>
            </div>
        </>

    )
}

export default MerchantAdd